<template>
  <div>
    <el-card>
      <el-tabs type="card" v-model="activeName">
        <el-tab-pane label="选课统计" name="first">
          <div class="flex">
            <div class="echarts" id="main"></div>
            <div class="echarts" id="main1"></div>
            <div class="echarts" id="main2"></div>
            <div class="echarts" id="main3"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="招生统计" name="2">招生统计</el-tab-pane>
        <el-tab-pane label="课程分析" name="3">课程分析</el-tab-pane>
        <el-tab-pane label="学习进度" name="4">学习进度</el-tab-pane>
        <el-tab-pane label="考试情况" name="5">考试情况</el-tab-pane>
        <el-tab-pane label="学籍异动情况" name="6">角色管理</el-tab-pane>
        <el-tab-pane label="交付情况" name="7">交付情况</el-tab-pane>
        <el-tab-pane label="毕业情况" name="8">毕业情况</el-tab-pane>
        <el-tab-pane label="学位情况" name="9">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    setOptions() {
      var chartDom = document.getElementById("main");
      //   console.log(this.$echarts);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 20, 170, 180, 150],
            type: "bar",
          },
          {
            data: [20, 100, 130, 80, 270],
            type: "bar",
          },
          {
            data: [200, 160, 140, 280, 70],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions1() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 20, 170, 180, 150],
            type: "line",
          },
          {
            data: [20, 100, 130, 80, 270],
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions2() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "60%",
            data: [
              { value: 150, name: "数据150" },
              { value: 100, name: "数据100" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions3() {
      var chartDom = document.getElementById("main3");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.setOptions();
    this.setOptions1();
    this.setOptions2();
    this.setOptions3();
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.flex {
  width: 60%;
  height: 100%;
  margin-left: 50%;
  transform: translate(-50%, 0);
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .echarts {
    width: 360px;
    height: 300px;
    margin-top: 20px;
  }
}
</style>
